<template>
  <el-card class="page-home">
    <template #header>
      后台首页
    </template>
    <!-- 卡片 -->
    <div class="card-list df jcsb">
      <card-vue :item='item' v-for="item in cardData" :key="item.title">
      </card-vue>
    </div>
    <!-- 图标容器 必须有宽高 -->
    <div class="myChart" ref="chartRef"></div>
</el-card>
</template>

<script>


import { getTotalDataReq } from "@/api/order";
import CardVue from "./Card.vue";
//引入echarts
import * as echarts from 'echarts';

export default {
  components: {
    CardVue,
  },
  data() {
    return {
      cardData: [],
    };
  },
  methods: {
    async getData() {
      let res = await getTotalDataReq();
      //解构数据
      let {
        xData,
        orderData,
        amountData,
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
      } = res.data;
      //处理数据
      let temp = [
        {
          title: "总订单",
          count: totalOrder,
          imgUrl: require("@/assets/imgs/1676639536476.jpg"),
        },
        {
          title: "总销售额",
          count: totalAmount,
          imgUrl: require("@/assets/imgs/1676639549348.jpg"),
        },
        {
          title: "今日订单数",
          count: todayOrder,
          imgUrl: require("@/assets/imgs/1676639566054.jpg"),
        },
        {
          title: "今日销售额",
          count: totayAmount,
          imgUrl: require("@/assets/imgs/1676639577899.jpg"),
        },
      ];
      //数据赋值
      this.cardData = temp;
      //画图
     
        let series = [
          {
            name: '金额数据',
            type: 'line',
            data: amountData,
          },
          {
            name: '订单数据',
            type: 'line',
            data: orderData,
          },
        ]
      this.renderLine({
        series,
        xData,
      })

    },

    // 画折线图
    renderLine(obj) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.chartRef);
      let options = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:obj.xData,
        },
        yAxis: {
          type: 'value'
        },
        series: obj.series,
      };
      myChart.setOption(options);
    }

  },
  created() { },
  mounted() {
    this.getData();
    // this.renderLine()
  },
};
</script>

<style lang="scss" scoped>
.page-home {
  height: 100%;
  background: #f0f2f5;
}

.myChart {
  margin-top: 50px;
  height: 300px;
  background: white;
}

.myChart {
  margin-top: 50px;
  height: 300px;
  background: white;
}
</style>